<template>
	<div class="vue__echarts" ref="vueEcharts" />
</template>

<script lang="ts" setup>
import { EChartsCoreOption } from 'echarts/core';
import useEcharts from './useEcharts';

interface echartsProps {
	options: EChartsCoreOption;
	theme?: string | object;
}

const props = withDefaults(defineProps<echartsProps>(), {
	options: {} as any,
	theme: 'light',
});

const vueEcharts = ref<HTMLElement | null>(null);

const chart = toRef(useEcharts(props, vueEcharts), 'chart');

function showLoading() {
	chart.value?.showLoading();
}
function hideLoading() {
	chart.value?.hideLoading();
}

defineExpose({
	showLoading,
	hideLoading,
});
</script>

<style lang="scss" scoped>
.vue__echarts {
	width: 100%;
	height: 100%;
}
</style>
